<template>
	<div id="tenant_list">

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="id" prop="id" align="center"></el-table-column>
            <!-- <el-table-column label="商家推广费用" prop="spreadAmount" align="center"></el-table-column> -->
			<el-table-column label="域名" prop="domain_name" align="center"></el-table-column>
            <el-table-column label="网站名称" prop="company" align="center"></el-table-column>
            <el-table-column label="qq" prop="qq" align="center"></el-table-column>
			<el-table-column label="微信" align="center">
                <template slot-scope="scope">
                    <el-image fit="cover" :src="scope.row.wechat | fullPath" :preview-src-list="[$envConfig.serviceUrl+scope.row.wechat]" style="width:50px; height:50px">
					</el-image>
				</template>
            </el-table-column>
            <el-table-column label="图标" prop="favicon" align="center">
				<template slot-scope="scope">
                    <el-image fit="cover" :src="scope.row.favicon | fullPath" :preview-src-list="[$envConfig.serviceUrl+scope.row.favicon]" style="width:50px; height:50px">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="网站logo" prop="favicon" align="center">
				<template slot-scope="scope">
                    <el-image fit="cover" :src="scope.row.logo | fullPath" :preview-src-list="[$envConfig.serviceUrl+scope.row.logo]" style="width:50px; height:50px">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="移动端头像" prop="heads" align="center">
				<template slot-scope="scope">
                    <el-image fit="cover" :src="scope.row.heads | fullPath" :preview-src-list="[$envConfig.serviceUrl+scope.row.heads]" style="width:50px; height:50px">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="网站标题" prop="title" align="center"></el-table-column>
			<!-- <el-table-column label="状态" prop="status" align="center">
				<template slot-scope="scope">
					
				</template>
			</el-table-column> -->
			<!-- <el-table-column label="创建时间" align="center">
				<template slot-scope="scope">
					{{$moment(scope.row.createTime).format('Y-MM-DD HH:mm')}}
				</template>
			</el-table-column> -->
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
                    <el-button @click="toUpdate(scope.row)" type="text">修改</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog
			:title="formData.id ? '修改': '添加'" 
			:visible.sync="dialogVisible" 
			width="800px" 
			center 
			:before-close="reset"
			:close-on-click-modal="false"
		>
			<el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
				<div class="dialog_main">
					<div class="dialog_left">
                        <!-- <el-form-item label="商家推广费用" prop="spreadAmount">
							<el-input v-model="formData.spreadAmount" placeholder="请输入商家推广费用"></el-input>
						</el-form-item> -->
						<el-form-item label="名称" prop="company">
							<el-input v-model="formData.company" placeholder="请输入名称"></el-input>
						</el-form-item>
						<el-form-item label="网址" prop="domainName">
							<el-input v-model="formData.domain_name" placeholder="请输入分站首页"></el-input>
						</el-form-item>
                        <el-form-item label="客服手机" prop="phone">
							<el-input v-model="formData.phone" placeholder="请输入客服手机"></el-input>
						</el-form-item>
						<el-form-item label="联系手机" prop="contactNumber">
							<el-input v-model="formData.contact_number" placeholder="请输入客服手机"></el-input>
						</el-form-item>
						<el-form-item label="QQ号" prop="qq">
							<el-input v-model="formData.qq" placeholder="请输入QQ号"></el-input>
						</el-form-item>
						<el-form-item label="首页标题" prop="title">
							<el-input v-model="formData.title" placeholder="请输入首页标题"></el-input>
						</el-form-item>
						<el-form-item label="首页关键词" prop="keywords">
							<el-input type="textarea" v-model="formData.keywords" placeholder="请输入首页关键词"></el-input>
						</el-form-item>
						<el-form-item label="首页描述" prop="descr">
							<el-input type="textarea" v-model="formData.descr" placeholder="请输入首页描述"></el-input>
						</el-form-item>
						<el-form-item label="备案号" prop="beianhao">
							<el-input v-model="formData.beianhao" placeholder="请输入备案号"></el-input>
						</el-form-item>
					</div>
					<div class="dialog_right">
						<el-form-item label="微信二维码" prop="wechat">
							<Upload
							ref="qrcode"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							:isCompress="false"
							 />
							<!-- <imgUpload :imgUrl = 'formData.wechat' @change="wechatChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="favicon" prop="favicon">
							<Upload
							ref="favicon"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							:isCompress="false"
							 />
							<!-- <imgUpload :imgUrl = 'formData.icon' @change="iconChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="logo" prop="logo">
							<Upload
							ref="logo"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							:isCompress="false"
							 />
							<!-- <imgUpload :imgUrl = 'formData.logo' @change="logoChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="移动端头像" prop="heads">
							<Upload
							ref="heads"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							:isCompress="false"
							 />
							<!-- <imgUpload :imgUrl = 'formData.logo' @change="logoChange"></imgUpload> -->
						</el-form-item>
					</div>
				</div>
				
			</el-form>
			<div class="align-center">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="write" :loading="formLoading">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog 
		title="设置成本" 
		width="400px" 
		center  
		:visible.sync="costVisible">
			<el-form :model="costForm" :rules="costRules" ref="costForm" label-width="80px">
				<el-form-item label="快递成本">
					<el-input v-model="costForm.expressCost" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品成本">
					<el-input v-model="costForm.goodsCost" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="costVisible = false">取 消</el-button>
				<el-button type="primary" @click="costVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	import Upload from '@/components/utils/Upload'
	export default {
		data() {
			return {
				list: [],
				total: 0,
				loading: false,
				selectData: [],
				dialogVisible: false,
				formLoading: false,
				params: {
					tenantid: sessionStorage.getItem('tenantid'),
				},
				formData: {
					
				},
				rules: {
                    spread_amount: [
						{ required: true, message: '请输入商家推广费用', trigger: 'blur' }
					],
					company: [
						{ required: true, message: '请输入网站名称', trigger: 'blur' }
					],
					domain_name: [
						{ required: true, message: '请输入网站域名', trigger: 'blur' }
					],
					// phone: [
					// 	{ required: true, message: '请输入客服手机', trigger: 'blur' }
					// ],
					qq: [
						{ required: true, message: '请输入qq号', trigger: 'blur' }
					],
					// wechat: [
					// 	{ required: true, message: '请输入微信号', trigger: 'blur' }
					// ],
					wechat: [
						{ required: true, message: '请上传微信二维码', trigger: 'blur' }
					],
					// favicon: [
					// 	{ required: true, message: '请上传网站favicon', trigger: 'blur' }
					// ],
					logo: [
						{ required: true, message: '请上传网站logo', trigger: 'blur' }
					],
					heads: [
						{ required: true, message: '请上传移动端头像', trigger: 'blur' }
					],
					title: [
						{ required: true, message: '请输入网站Title', trigger: 'blur' }
					],
					// keywords: [
					// 	{ required: true, message: '请输入关键词', trigger: 'blur' }
					// ],
					// descr: [
					// 	{ required: true, message: '请输入分站简介', trigger: 'blur' }
					// ],
					// beianhao: [
					// 	{ required: true, message: '请输入备案号', trigger: 'blur' }
					// ],
				},
				// 设置成本
				costVisible: false,
				costForm: {
					id: '',
					expressCost: 0,
					goodsCost: 0,
				},
				costRules: {

				}
				
			};
		},

		components: {
			Upload
		},

		watch: {},

		create() {},

		mounted() {
			this.getList();
		},

		methods: {
			
			handleClose(done){
				done() 
			},
			
			
			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/tenant/webinfo',
					params: this.params,
					success: result =>{
                        this.list = [];
                        this.list.push(result);
					},
					finally: ()=>{
						this.loading = false 
					}
				})
			},
			
            write(){
            
				this.formData.wechat = this.$refs.qrcode.path_list[0].path;
				this.formData.favicon = this.$refs.favicon.path_list[0].path;
				this.formData.logo = this.$refs.logo.path_list[0].path;
				this.formData.heads = this.$refs.heads.path_list[0].path;
                if(!this.formData.wechat){
                    this.$message.error('微信二维码不能为空');
                    return;
                }
                if(!this.formData.favicon){
                    this.$message.error('网站图标不能为空');
                    return;
                }
                if(!this.formData.logo){
                    this.$message.error('网站logo不能为空');
                    return;
				}
				if(!this.formData.heads){
                    this.$message.error('移动端头像不能为空');
                    return;
                }
                this.formData.wechat = this.$refs.qrcode.path_list[0].path.replace(this.$envConfig.serviceUrl,'');
				this.formData.favicon = this.$refs.favicon.path_list[0].path.replace(this.$envConfig.serviceUrl,'');
				this.formData.logo = this.$refs.logo.path_list[0].path.replace(this.$envConfig.serviceUrl,'');
				this.formData.heads = this.$refs.heads.path_list[0].path.replace(this.$envConfig.serviceUrl,'');
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
						 	return; 
						 }
						this.formLoading = true
						this.$request.post({
							url:'/ReportApi/tenant/webupdate',
							params: this.formData,
							success: result => {
								this.$message.success('操作成功')
								this.dialogVisible = false 
								this.reset()
								this.getList()
							},
							finally: ()=>{
								this.formLoading = false 
							}
						})
					}
				})
			},
			
			reset(done){
				for(var key in this.formData){
					this.formData[key] = ''
				}
				if(done){
					done();
				}
			},
			
			toUpdate(data) {
                // for(var key in data){
                //     this.formData[key] = data[key]
                // }
                this.formData = JSON.parse(JSON.stringify(data));
                this.$delete(this.formData,'createTime');
                this.dialogVisible = true;
				setTimeout(() => {
					this.$refs.qrcode.path_list = [{path: this.$envConfig.serviceUrl + this.formData.wechat}];
					this.$refs.favicon.path_list = [{path: this.$envConfig.serviceUrl + this.formData.favicon}];
					this.$refs.logo.path_list = [{path: this.$envConfig.serviceUrl + this.formData.logo}];
					this.$refs.heads.path_list = [{path: this.$envConfig.serviceUrl + this.formData.heads}];
				},500);
				
			},

			// 设置成本
			toSetCost(id) {
				this.costForm.id = id;
				this.costVisible = true;
			},
			SetCost() {

			}
			
		},

		beforeDestroy() {}
	}
</script>

<style lang="scss">
.el-form .img_mode{
	width: 120px;
	img{
		width: 100%;
	}
}
</style>

<style lang="scss" scoped>
	.page{
		text-align: right;
		margin-top: 20px;
	}
	.dialog_main {
		display: flex;
		justify-content: space-between;
	}
	.dialog_left {
		width: 400px;
	}
	.dialog_right {
		width: 300px;
	}
	
</style>
